import './style.scss'
import { Component } from 'react'
import { loginAdmin } from '../../api/admin'
import { message } from 'antd';
import  withRouter  from '../../util/withRouter'
import { connect  } from 'react-redux'
import { setAdminInfo } from '../../store/adminSlice'

class  Login  extends Component {
          
    state = {
        name:'',
        pwd:''
    };

    handleLogin =  async ()=>{

        // 数据过滤
        if(!this.state.name) return message.warning('请填写正确用户名')
        if(!this.state.pwd) return message.warning('密码！不填了？？？？')

        // 执行登录
        let res =  await loginAdmin({
            name:this.state.name,
            pwd:this.state.pwd
        })

        console.log('res',res)
        console.log('props' ,  this.props)
        this.props.dispatch(setAdminInfo(res.data))//全局设置adminInfo

        message.info('登陆成功');

        //重定向到 /index
        this.props.navigate('/index',{replace:true})
     
    }
    render(){

        return (
            <div className='loginPage'>
                <div className='loginbox'>
                    <div >
                        <input placeholder='请输入账号' value={this.state.name} onChange={ ev=>this.setState({name:ev.target.value}) } />  
                    </div>
                    <div>
                        <input placeholder='请输入密码' type="password" value={this.state.pwd}  onChange={ ev=>this.setState({pwd:ev.target.value}) } />  
                    </div>
                    <div>
                        <button onClick={ this.handleLogin } >立即登录</button>
                    </div>
                    
                </div> 

            </div>

            // <div className='loginPage'>
            //     <Form
            //         name="normal_login"
            //         className="login-form"
            //         >
            //         <Form.Item
            //             name="username"
            //             rules={[
            //             {
            //                 required: true,
            //                 message: 'Please input your Username!',
            //             },
            //             ]}
            //         >
            //             <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            //         </Form.Item>
            //         <Form.Item
            //             name="password"
            //             rules={[
            //             {
            //                 required: true,
            //                 message: 'Please input your Password!',
            //             },
            //             ]}
            //         >
            //             <Input
            //             prefix={<LockOutlined className="site-form-item-icon" />}
            //             type="password"
            //             placeholder="Password"
            //             />
            //         </Form.Item>

            //         <Form.Item className="button">
            //             <Button type="primary" htmlType="submit" className="login-form-button">
            //             登陆
            //             </Button>
            //         </Form.Item>
            //     </Form>

            // </div>
        )

    }
       
}

const mapStateToProps = (state)=>({...state})

export default connect(mapStateToProps)(withRouter(Login))
